<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../../_template.xhtml"
                xmlns:p="http://primefaces.org/ui"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core">

    <ui:define name="centro">
        <h:form >
            <p:outputLabel value="Cadastro de Clientes" style="font-size: x-large; margin-left: 25px" styleClass="labelInserir" /> 
            <p:fieldset styleClass="fieldsetInsert" style=" margin-left: 25px">
                <p:messages />
                <h:panelGrid columns="1">
                    <p:outputLabel value="Tipo de pessoa:" for="tipoCliente" />

                    <p:selectOneMenu id="tipoCliente" value="#{clienteBean.tipoPessoa}" 
                                     required="true" requiredMessage="Selecione o tipo de pessoa!" >
                        <f:selectItem itemLabel="Escolha uma opção" itemValue="" />
                        <f:selectItem itemLabel="Pessoa Juridica" itemValue="PJ" />
                        <f:selectItem itemLabel="Pessoa Física" itemValue="PF" />
                        <p:ajax event="change" update="@all" />
                    </p:selectOneMenu>
                </h:panelGrid>
                <br />
                <h:panelGrid columns="1">
                    <p:outputLabel value="Digite o CPF:" for="cpf" rendered="#{clienteBean.tipoPessoa eq 'PF'}" />
                    <p:inputMask id="cpf"  mask="999.999.999-99" value="#{clienteBean.cpf}" rendered="#{clienteBean.tipoPessoa eq 'PF'}" />

                </h:panelGrid>
                <h:panelGrid columns="1">
                    <p:outputLabel value="Digite o CNPJ:" for="cnpj" rendered="#{clienteBean.tipoPessoa eq 'PJ'}" />
                    <p:inputMask id="cnpj"  mask="99.999.999/9999-99" value="#{clienteBean.cnpj}" rendered="#{clienteBean.tipoPessoa eq 'PJ'}" />

                </h:panelGrid>
                <br />
                <p:commandButton value="Novo" action="#{clienteBean.novo}" icon="ui-icon-plus"  ajax="false" />  
                <p:commandButton value="Consultar cliente" action="#{clienteBean.consultar}" icon="ui-icon-search" ajax='false' style="margin-left: 5px;"/>
                <p:commandButton value="Listar clientes" action="#{clienteBean.listarClientes}" icon="ui-icon-search" ajax='false' style="margin-left: 5px;"/>
<!--            <p:commandButton value="Limpar" action="#{clienteBean.limpar}" icon="ui-icon-search" ajax='false' style="margin-left: 5px;"/>-->
<!--            <p:commandButton value="Voltar" action="#{clienteBean.encerrar}" icon="ui-icon-search" ajax='false' style="margin-left: 5px;"/>-->
                <br />
                <br />

            </p:fieldset>
        </h:form>
        <h:form>

            <p:dataTable value="#{clienteBean.clientesPF}" var="clientePF" emptyMessage="Nenhum registro encontrado!" 
                         rendered="#{not empty clienteBean.clientesPF and clienteBean.tipoPessoa eq 'PF'}" id="formTable1" style=" margin-left: -75px" >                                             

                <p:column style="text-align: left; width: 150px" headerText="CPF" >
                    <h:outputText value="#{clientePF.cpf}" />
                </p:column>
                <p:column style="text-align: left;" headerText="Nome do cliente">
                    <h:outputText  value="#{clientePF.nome}"/>
                </p:column>
                <p:column style="width: 10px;" headerText="Alterar">
                    <center>
                        <p:commandButton action="#{clienteBean.alterarClientePF(clientePF)}" icon="ui-icon-pencil" ajax="false" />
                    </center>
                </p:column>
                <p:column style="width: 10px;" headerText="Excluir">
                    <center>
                        <p:commandButton icon="ui-icon-trash" actionListener="#{clienteBean.removerClientePF(clientePF)}" update="@all" >
                            <p:confirm header="Confirmação" message="Deseja realmente excluir a informação?" icon="ui-icon-alert" />
                        </p:commandButton>
                    </center>
                </p:column>
            </p:dataTable>


            <p:dataTable value="#{clienteBean.clientesPJ}" var="clientePJ" emptyMessage="Nenhum registro encontrado!" 
                         rendered="#{not empty clienteBean.clientesPJ and clienteBean.tipoPessoa eq 'PJ'}" id="formTable2" style=" margin-left: -75px" >

                <p:column style="width: 150px; text-align: left;" headerText="CNPJ" >
                    <h:outputText value="#{clientePJ.cnpj}" />
                </p:column>

                <p:column style="width: 750px; text-align: left;" headerText="Nome do cliente">
                    <h:outputText  value="#{clientePJ.nome}">
                        <f:converter converterId="convertUpper" /> 
                    </h:outputText>
                </p:column>

                <p:column style="width: 10px;" headerText="Alterar">
                    <center>
                        <p:commandButton action="#{clienteBean.alterarClientePJ(clientePJ)}"  icon="ui-icon-pencil" id="formTable2" />
                    </center>
                </p:column>
                <p:column style="width: 10px;" headerText="Excluir">
                    <center>
                        <p:commandButton icon="ui-icon-trash" actionListener="#{clienteBean.removerClientePJ(clientePJ)}" update="@all" >
                            <p:confirm header="Confirmação" message="Deseja realmente excluir a informação?" icon="ui-icon-alert" />
                        </p:commandButton>
                    </center>
                </p:column>
            </p:dataTable><br />
            <p:confirmDialog global="true" showEffect="fade" id="Confirmação" >
                <p:commandButton value="Sim" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
                <p:commandButton value="Não" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
            </p:confirmDialog>


        </h:form>
    </ui:define>
</ui:composition>
